<div id="ps0">
	<div class="personcenterPage clearfix">
	{include file="public/left" /}
	<!-- start -->
		<div class="view-content" id="app1">
			<div class="layui-tab layui-tab-brief " lay-filter="courseBox">
				<ul class="layui-tab-title ">
					<li :class="(is_index==0)?'layui-this':''" @click="selectTab();">全部课程</li>
					<li :class="(is_index==1)?'layui-this':''" @click="selectTab();">上架课程</li>
					<li :class="(is_index==2)?'layui-this':''" @click="selectTab();">下架课程</li>
				</ul>
				<div class="addCourse" style="line-height:36px;position: relative;right:0px;top:-40px;float:right;">
					<a class="layui-btn layui-btn-my layui-btn-sm" href="{:url('index/course/add')}"><i class="layui-icon">&#xe608;</i> 新增课程</a>
				</div>
				<div class="layui-tab-content">
					<div class="layui-tab-item "  :class="(is_index==0)?'layui-show':''" >
						<table class="layui-table" lay-skin="line" >
						  <colgroup>
						    <col width="320">
						    <col width="100">
						    <col width="100">
						    <col width="90">
						    <col>
						  </colgroup>
						  <thead>
						    <tr>
						      <th>课程名称</th>
						      <th>是否付费</th>
						      <th>价格</th>
						      <th>上下架</th>
						      <th>操作</th>
						    </tr> 					
						  </thead>
						  <tbody>
						    <tr v-for="(item ,index) in courseList">
								<td>{{item.course_name}}</td>
								<td style="color:red;text-align:center;" v-if="item.free==1">付费</td>
								<td style="color:red;text-align:center;" v-else>免费</td>
								<td>￥{{item.original_price}}</td>
								<td v-if="item.is_putaway==1">
									<button type="button" class="layui-btn layui-btn-my layui-btn-sm" @click="is_put(item);">上架</button>
								</td>
								<td v-else>
									<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" @click="is_put(item);">下架</button>
								</td>
								<td>
									<div class="layui-btn-container">
										<a :href="item.chapterUrl" class="layui-btn layui-btn-primary layui-btn-sm" >
										    <i class="layui-icon ">&#xe6ed;</i>
										    章节管理
										  </a>
										  <a :href="item.editUrl" class="layui-btn layui-btn-primary layui-btn-sm" >
										    <i class="layui-icon">&#xe642;</i>修改
										  </a>
									</div>
								</td>
						    </tr>
						  </tbody>
						</table>
					</div>
				    <div class="layui-tab-item" :class="(is_index==1)?'layui-show':''" >
						<table class="layui-table" lay-skin="line" >
						  <colgroup>
						    <col width="320">
						    <col width="100">
						    <col width="100">
						    <col width="90">
						    <col>
						  </colgroup>
						  <thead>
						    <tr>
						      <th>课程名称</th>
						      <th>是否付费</th>
						      <th>价格</th>
						      <th>上下架</th>
						      <th>操作</th>
						    </tr> 					
						  </thead>
						  <tbody>
						    <tr v-for="(item ,index) in courseList" v-if="item.is_putaway==1">
								<td>{{item.course_name}}</td>
								<td style="color:red;text-align:center;" v-if="item.free==1">付费</td>
								<td style="color:red;text-align:center;" v-else>免费</td>
								<td>￥{{item.original_price}}</td>
								<td>
									<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" @click="is_put(item);">下架</button>
								</td>
								<td>
									<div class="layui-btn-container">
										<a :href="item.chapterUrl" class="layui-btn layui-btn-primary layui-btn-sm" >
										    <i class="layui-icon ">&#xe6ed;</i>
										    章节管理
										  </a>
										  <a :href="item.editUrl" class="layui-btn layui-btn-primary layui-btn-sm" >
										    <i class="layui-icon">&#xe642;</i>修改
										  </a>
									</div>
								</td>
						    </tr>
						  </tbody>
						</table>
					</div>
				    <div class="layui-tab-item" :class="(is_index==2)?'layui-show':''" >
						<table class="layui-table" lay-skin="line" >
						  <colgroup>
						    <col width="320">
						    <col width="100">
						    <col width="100">
						    <col width="90">
						    <col>
						  </colgroup>
						  <thead>
						    <tr>
						      <th>课程名称</th>
						      <th>是否付费</th>
						      <th>价格</th>
						      <th>上下架</th>
						      <th>操作</th>
						    </tr> 					
						  </thead>
						  <tbody>
						    <tr v-for="(item ,index) in courseList" v-if="item.is_putaway==2">
								<td>{{item.course_name}}</td>
								<td style="color:red;text-align:center;" v-if="item.free==1">付费</td>
								<td style="color:red;text-align:center;" v-else>免费</td>
								<td>￥{{item.original_price}}</td>
								<td>
									<button type="button" class="layui-btn layui-btn-my layui-btn-sm" @click="is_put(item);">上架</button>
								</td>
								<td>
									<div class="layui-btn-container">
										<a :href="item.chapterUrl" class="layui-btn layui-btn-primary layui-btn-sm" >
										    <i class="layui-icon ">&#xe6ed;</i>
										    章节管理
										  </a>
										  <a :href="item.editUrl" class="layui-btn layui-btn-primary layui-btn-sm" >
										    <i class="layui-icon">&#xe642;</i>修改
										  </a>
									</div>
								</td>
						    </tr>
						  </tbody>
						</table>
				    </div>
				</div>
			</div>      
		</div>
	<!-- end -->
	</div>
</div>
<script type="text/javascript">

$(function() {
	layui.use(['element','layer'], function(){
	  var element = layui.element;
	  var layer = layui.layer;
	  window.element=element;
	  window.layer=layer;
	});
});   
var el=new Vue({
	el:'#app1',
	data:{
		courseList:[
		],
		is_index:0
	},
	methods:{
		// 获取课程列表
		async getcourseList(i){
			let {data}=await this.$http.get('course/List',{params:{status:i}});
			if(data.code==200){
				let arr=this.cleanData(data.data);
				this.courseList=arr;
			}
		},
		//
		cleanData(arr){
			return arr.filter((item)=>{item.editUrl='/course/edit/'+item.id;item.chapterUrl='/course/chapter/'+item.id;return item;});
		},
		// 上下架
		async is_put(item){
			let id=(item.is_putaway==2)?1:2;
			item.is_putaway=id;
			let {data} =await this.$http.put('/course/edit/'+item.id,{is_putaway:id});
			if(data.code==200){
				layer.msg('修改成功');
			}else{
				layer.msg('修改成功');
			}
		},
		selectTab(){
			that=this;
			element.on('tab(courseBox)', function(data){
			  that.is_index=data.index;
			  console.log(that.is_index)
			  that.getcourseList(that.is_index);
			})
		},
	},
	created(){
		this.is_index=0;
		this.getcourseList(this.is_index);
	}
})
</script>